import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  sideTree: {
    width: "100%",
    height: "100%",
    display: "flex",
    flexDirection: "column",
  },
  topbar: {
    display: "flex",
    alignItems: "center",
  },
  search: {
    borderRadius: "4px",
    boxSizing: "border-box",
    height: "24px",
    overflow: "hidden",
    border: "1px solid #d9d9d9",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "0px 8px",
  },
  searchInput: {
    flex: 1,
    overflow: "hidden",
    border: 0,
    outline: 0,
    height: "100%",
    minWidth: "60px",
    "&:focus-visible": {
      outline: 0,
    },
    "&::-webkit-input-placeholder": {
      color: "#c5c5c5",
    },
    flexGrow: "1",
  },
  searchIcon: {
    fontSize: "13px",
    color: "#d5d5d5",
    display: "contents",
  },
  editorIcon: {
    fontSize: "10px",
    width: "24px",
    height: "24px",
    color: "#999",
    backgroundColor: "#F5F5F5",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    marginLeft: "10px",
    borderRadius: "4px",
    cursor: "pointer",
    "&:hover": {
      backgroundColor: "#E9E9E9",
    },
  },
  tree: {
    flex: 1,
    padding: "6px 0",
  },
});

export { useStyles };
